<!--
  @Descripttion：搜索组件调用demo
  @Author：zqy
  @Date：2020-10-17 11:31:53
  @Last Modified by：zqy
  @Last Modified time：2020-10-17 11:31:53
-->
<template>
  <div>
      <search-form 
        ref="refSearch" 
        :default-row="3" 
        :search-config="searchData" 
        :label-width="150" 
        @clear="clearSearch" 
        @search="handleSearch" 
        @edit-change="handleEditChange"
      >
      </search-form>
    </div>

  </div>
</template>

<script>
import selectWithDialog from '../InputWithDialog/selectWithDialog'
export default {
  name: 'CustomSearch',
  components: {selectWithDialog},
  props: {},
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  },

  data() {
    return {
      searchData:[
        {
          label: '责任人组织',
          prop: 'responsibleOrg',
          type: 'select',
          value: [],
          placeholder: '',
          filter: false,
          config: {
            remote: true,
            filterable: true,
            multiple: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/QUERY_ORGANIZATION`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'work-order', domainCode: 'marketing' }
          }
        }
        ],
        edit:false
    }
  },

  computed: {},
  created(){
    
  },

  methods: {
    validateFuncDemo(){
      return new Promise((resolve,reject)=>{
        if (1===1){
          const value = '允许'
          console.log('resolve')
          resolve(value)
        } else {
          const error = '不允许'
          this.$message.error('请选择条件')
          console.log('reject')
          reject(error)
        }
      })
      this.$message.error('请选择条件')
      return false
    },
    promiseConfirm(data){
      return new Promise((resolve, reject) => {
       console.log('当前选中',data)
       reject('允许')
      })
    },
    handleDemoChanleData(data){
      console.log('获取到所有字典数据',data)
    },
    handleDemoChannel(val){
      console.log('字典选择',val)
    },
    handleDemoShop(val){
      console.log('店铺变更',val)
    },
    getChannelData(data){
console.log('获取到所有字典数据',data)
    },
    handleChannelChange(val){
      console.log('字典Checkbox',val)
    },

    clearSearch(data){
      console.log('清除搜索',data)
    },
    handleSearch(data){
      console.log('搜索参数',data)
    },
    handleChange(data){
      console.log('自定义弹窗选值变更',data)
    },
    exportSuccessCallback(config,res){
      console.log(config,res)
      this.$message.success('导出成功')
    },
    handleExportSuccess(res){
      // console.log('导出执行完成',res)
      this.refreshTable(true)
    },
    // 省变更
    handleProvinceChange() {
      this.$set(this.demoForm, 'cityId', '')
      this.$set(this.demoForm, 'cityName', '')
      this.handleCityChange()
    },
    // 市变更
    handleCityChange() {
      this.$set(this.demoForm, 'districtsId', '')
      this.$set(this.demoForm, 'districtsName', '')
      this.handleDistrictChange()
    },
    // 区县变更
    handleDistrictChange() {
      this.$set(this.demoForm, 'streetId', '')
      this.$set(this.demoForm, 'streetName', '')
    },
    refreshTable(){
      console.log('导入导出成功')
    },
    handleImportSuccess(res){
      if(res.msg){
        this.$confirm(`<div style="line-height:22px;font-size:12px">${res.msg}</div>`, '部分导入成功；存在以下异常：', {
          showCancelButton: false,
          showConfirmButton: false,
          type: 'warning',
          dangerouslyUseHTMLString: true
        })
      }
      this.refreshTable()
    },
    handleBlur(){
      console.log('失去焦点了')
      this.edit=false
    },
    // 监听搜索项的编辑
    handleEditChange({prop,value}){
      console.log('选项值更新了',prop,value)
      /* if(prop==='txtName'){
        const index = this.searchData.findIndex(v=>v.prop==='inputDlgName2')
        const config = this.searchData[index]
        config.dialogConfig.filtersRaw = [{id:'typeCode',property:'typeCode',operator:'=',value:value}]
        this.$set(this.searchData,index,config)
      } */ 
      if (prop === 'platformCode') {
        let code =[]
        if(value && value.length){
          code=value.map(v=>v.value)
        }
        this.setStoreConfig(code.join(','))
      }
    },
    
    // 设置店铺查询配置
    setStoreConfig(platformCode) {
      const filtersRaw = []
      if (platformCode) {
        filtersRaw.push({ id: 'platformCode', property: 'platformCode', operator: 'in', value: `[${platformCode}]` })
      }
      const configItem = this.searchData.find(v => v.prop === 'storeCode')
      console.log(configItem)
      this.$set(configItem.dialogConfig, 'filtersRaw', filtersRaw)
      this.$set(configItem, 'value', [])

      this.$refs.refSearch.updateValue('storeCode','')
      console.log('storeCode', this.$refs.refSearch.searchData.storeCode)
    },
  }
}
</script>
<style lang='scss'>
/* @import url(); 引入css类 */
.cus-val{
  height: 28px;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
